<!DOCTYPE HTML>
<html>
	<head>
	<title>吾股评分</title>
	<link href="css/text.css" rel="stylesheet" type="text/css" />
	<meta charset="utf-8" />
	<style>
		.fixedBox{
				border: 1px solid #555555;				
				white-space: nowrap;	
			}
			.fixedBox::-webkit-scrollbar {
				width: 10px;     
				height: 10px;				
			}			
		table{
			width:500px; 
			border-collapse:collapse; 
			text-align:center;
		}
		td,th{border:1px solid #696969}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="DatePicker/WdatePicker.js"> </script>
	</head>
	<body>
		<div id="data"></div>
		<script>			
			window.onload = function() {				
				
				changeStyle();
				getSource();
			}
									
			function changeStyle() {
				var obj = document.getElementById("towrite");								
				obj.style.left= "0px"; 				
				obj.style.width= "520px";	
				//obj.style.height= "620px";		
				obj.style.fontSize="12px";					
			}
			
			
			var trid = "";
			function changeCss(obj,hid,id){						
				var tlist = document.getElementById(id).getElementsByTagName("tr");					
				for(var i = 0; i < tlist.length; i++){														
					tlist[i].style.backgroundColor = "#252528"; 					
				}
				trid = hid;
				var tr = document.getElementById(hid);				
				tr.style.backgroundColor = "#483D8B";						
			}
			
			function hover(){  //鼠标经过
				var rows = document.getElementsByTagName('tr');
				for(var i=0;i<rows.length;i++){
					rows[i].onmouseover=function(){						
						if(this.id != ""){  //过滤表头
							this.style.background="#800000";
						}
					}
					rows[i].onmouseout=function(){
						if(this.id != ""){  //过滤表头
							if(this.id != trid){  //过滤选中行
								this.style.background="#252528";
							}else{
								this.style.background="#483D8B";
							}
						}						
					}					
				}
			}			
			
			
			
			function getSource() {				
				div = document.getElementById('towrite');												
				div.innerHTML = '<font size="3">吾股评分</font><font id="bt" size="2" style="float:right;margin-right:100px;"></font>';										
				$("#bt").text('载入数据……');
				var url = "吾股评分.json"; 
				xmlHttp = new XMLHttpRequest();
				xmlHttp.onreadystatechange = writeSource;
				xmlHttp.open("GET", url, true);
				xmlHttp.send(null);
			
			}
						
			function writeSource() { 
				if (xmlHttp.readyState == 4) {					
					var data = xmlHttp.responseText
					//document.write(data);
					
					var json = JSON.parse(data);										
					
					//创建table					
					var table=document.createElement("table");										
					var thead=document.createElement("thead");
					table.appendChild(thead);					
					var tr=document.createElement("tr");
					thead.appendChild(tr);					
					
					
					for(var key in json[0]){  //表头											
						var th=document.createElement("th");						
						th.innerHTML=key;						
						tr.appendChild(th);						
					}
										
					var tbody=document.createElement("tbody");					
					table.appendChild(tbody);
					
					//遍历json
					for(var i = 0; i < json.length; i++){					
						var tr=document.createElement("tr");						
						var p = 1;
						var dm = "";
						var mc = "";
						for(var key in json[i]){ //行元素遍历						
							var td=document.createElement("td");							
							
							var rc = json[i][key];
							if(p == 1){  //代码列
								dm = rc;
								tr.id = dm;
							}					
							td.innerHTML = "<a href=http://www.treeid/code_" + dm + " id='" + p + "' onclick='changeCss(this,\"" + dm + "\",\"gg\")'>" + rc + "</a>";						
							tr.appendChild(td);							
							p++;
						}														
						tbody.appendChild(tr);																
					}					
					var div = document.getElementById("towrite");									
					div.appendChild(table);
					table.id = "gg";	
					$("#bt").text('');			
				}	
				
				//var table=document.getElementsByTagName("table")[0];
				makeSortable(table);
				hover();
			}
						
			function makeSortable(table) {					
				var headers=table.getElementsByTagName("th");				
				for(var i=0;i<headers.length;i++){			
					(function(n){					
						var flag=false;						
						headers[n].onclick=function(){						
							$("#bt").text('正在排序……');		
							
							var t = setTimeout(function() {															
								showCol(n);		//高亮
								var tbody=table.tBodies[0];
								var rows=tbody.getElementsByTagName("tr");
								rows=Array.prototype.slice.call(rows,0);

								//基于第n个<td>元素的值对行排序
								rows.sort(function(row1,row2){
									headtxt = headers[n].textContent;								
									var cell1=row1.getElementsByTagName("td")[n];//获得第n个单元格
									var cell2=row2.getElementsByTagName("td")[n];																
									var val1=cell1.textContent||cell1.innerText;//获得文本内容
									var val2=cell2.textContent||cell2.innerText;
									if(headtxt.indexOf("名称") != -1 || headtxt.indexOf("行业") != -1){
										val1 = val1;
										val2 = val2;
									}else{
										if(val1 == "-"){
											val1 = " ";
										}
										if(val2 == "-"){
											val2 = " ";
										}
										val1 = val1.replace(" ","0").replace("无","1000").replace("NaN","0");
										val2 = val2.replace(" ","0").replace("无","1000").replace("NaN","0");
										if(val1.indexOf("万") != -1){
											val1 = parseFloat(val1)*10000;
										}else if(val1.indexOf("亿") != -1){
											val1 = parseFloat(val1)*100000000;
										}else{
											val1 = parseFloat(val1);
										}
										
										if(val2.indexOf("万") != -1){
											val2 = parseFloat(val2)*10000;
										}else if(val2.indexOf("亿") != -1){
											val2 = parseFloat(val2)*100000000;
										}else{
											val2 = parseFloat(val2);
										}
									}
									if(val1<val2){
										return -1;
									}else if(val1>val2){
										return 1;
									}else{
										return 0;
									}
								});
								if(flag){
									rows.reverse();
								}
								
								for(var i=0;i<rows.length;i++){
									tbody.appendChild(rows[i]);
								}

								flag=!flag;							
								$("#bt").text('');
							},100);
							//clearTimeout(t1)  // 去除定时器
						}
						
					}(i));
				}
				
			}
			
			function showCol(iCol){			
				var oTable = document.getElementsByTagName('table')[0];
				for (i=0;i < oTable.rows.length; i++){										
					for (j=0;j < oTable.rows[0].cells.length; j++){
						oTable.rows[i].cells[j].style.color = "#d2d2d3";									
					}
					oTable.rows[i].cells[iCol].style.color = "#FF6633";					
				}

				otagsA = oTable.getElementsByTagName("a");  //a变色
				for (i = 0; i < otagsA.length; i++) {
					otagsA[i].style.color = "#d2d2d3";					
					if(otagsA[i].id == iCol + 1){
						otagsA[i].style.color = "#FF6633";
					}
				}								
			}
		</script>
		<div id="towrite" class="fixedBox"></div>
	</body>
</html>